4.4: RecyclerView

Materi:

Saat Anda menampilkan banyak item dalam daftar yang bisa digulir, sebagian besar item tidak terlihat. Misalnya, dalam daftar kata yang panjang atau banyak judul berita, pengguna hanya melihat sedikit item daftar untuk setiap kalinya. RecyclerView digunakan untuk menampilkan daftar kata dari database

Atau, Anda bisa memiliki kumpulan data yang akan berubah saat pengguna berinteraksi dengannya. Jika Anda membuat tampilan baru setiap kali data berubah, itu juga membuat banyak tampilan, bahkan untuk kumpulan data yang kecil.

Dari perspektif kinerja, Anda bisa meminimalkan jumlah tampilan yang disimpan pada titik tertentu (Memori), dan jumlah tampilan yang harus Anda buat (Waktu). Kedua tujuan ini bisa dicapai dengan membuat agak lebih banyak tampilan daripada yang bisa dilihat pengguna pada layar, dan buat cache serta gunakan kembali tampilan yang dibuat sebelumnya dengan data berbeda saat pengguna menggulir ke dalam dan ke luar tampilan. Membuat cache tampilan RecyclerView

Kelas RecyclerView adalah versi ListView yang lebih canggih dan fleksibel. Widget ini adalah kontainer untuk menampilkan rangkaian data besar yang bisa digulir secara sangat efisien dengan mempertahankan tampilan dalam jumlah terbatas.

Gunakan widget RecyclerView bila Anda perlu menampilkan banyak data yang bisa digulir, atau kumpulan data dengan elemen yang berubah pada waktu proses berdasarkan aksi pengguna atau kejadian jaringan.

Komponen RecyclerView

Untuk menampilkan data dalam RecyclerView, Anda memerlukan bagian berikut:

  • Data. Tidak penting dari mana asal data. Anda bisa membuat data secara lokal, seperti yang Anda lakukan dalam latihan, mendapatkannya dari database perangkat seperti yang akan Anda lakukan dalam praktik nanti, atau menariknya dari awan.

  • RecyclerView. Daftar gulir yang berisi item daftar.

    Instance RecyclerView sebagaimana didefinisikan dalam file layout aktivitas Anda akan bertindak sebagai kontainer tampilan.

  • Layout untuk satu item data. Semua item daftar tampak sama, sehingga Anda bisa menggunakan layout yang sama untuk semuanya. Layout item harus dibuat secara terpisah dari layout aktivitas, sehingga satu per satu tampilan item bisa dibuat dan diisi data.

  • Pengelola layout Pengelola layout menangani penyusunan (layout) komponen antarmuka pengguna dalam suatu tampilan. Semua grup tampilan memiliki pengelola layout. Untuk LinearLayout, sistem Android menangani layout untuk Anda. RecyclerView memerlukan pengelola layout eksplisit untuk mengelola susunan item daftar yang terdapat di dalamnya. Layout ini bisa vertikal, horizontal, atau berupa petak.

    Pengelola layout adalah instance dari Recyclerview.LayoutManager untuk menyusun layout item dalam RecyclerView

  • Adapter. Adapter menghubungkan data Anda dengan RecyclerView. Adapter menyiapkan data dan cara menampilkan data dalam view holder. Bila data berubah, adapter akan memperbarui materi tampilan item daftar terkait dalam RecyclerView.

    Adapter juga merupakan ekstensi dari RecyclerView.Adapter. Adapter menggunakan ViewHolder untuk menampung tampilan yang menyusun setiap item dalam RecyclerView, dan mengikat data untuk ditampilkan dalam tampilan yang menampilkannya.

  • View holder. View holder memperluas kelas ViewHolder. View holder berisi tampilan informasi untuk menampilkan satu item dari layout item.

    View holder digunakan oleh adapter untuk menyediakan data, yang merupakan ekstensi dari RecyclerView.ViewHolder

Diagram di bawah ini menampilkan hubungan antara komponen-komponen ini. Arsitektur RecyclerView

Data

Semua data yang bisa ditampilkan akan ditampilkan dalam RecyclerView.

  • Teks
  • Gambar
  • Ikon

Data bisa berasal dari sumber mana pun.

  • Dibuat oleh aplikasi. Misalnya, kata acak untuk permainan.
  • Dari database lokal. Misalnya, daftar kontak.
  • Dari storage awan atau internet. Misalnya judul berita.

RecyclerView

RecyclerView adalah:

  • Suatu grup Tampilan untuk kontainer yang bisa digulir
  • Ideal untuk daftar item serupa yang panjang
  • Hanya menggunakan tampilan dalam jumlah terbatas yang digunakan kembali saat tampilan tersebut tidak tampak di layar. Hal ini menghemat memori dan mempercepat pembaruan item daftar saat pengguna menggulir data, karena tidak perlu membuat tampilan baru untuk setiap item yang muncul.
  • Secara umum, RecyclerView menyimpan sebanyak mungkin tampilan item yang muat di layar, plus sedikit tambahan pada setiap akhir daftar untuk memastikan pengguliran berjalan cepat dan lancar.

Layout Item

Layout adalah sebuah item daftar yang disimpan dalam file terpisah sehingga adapter bisa membuat tampilan item dan mengedit materinya secara independen dari layout aktivitas.

Pengelola Layout

Pengelola layout memosisikan tampilan item di dalam grup tampilan, seperti RecyclerView dan menentukan kapan harus menggunakan kembali tampilan item yang tidak lagi terlihat oleh pengguna. Untuk menggunakan kembali (atau mendaur ulang) tampilan, pengelola layout bisa meminta adapter untuk mengganti materi tampilan dengan elemen lain dari kumpulan data. Mendaur ulang tampilan dengan cara ini akan meningkatkan kinerja karena menghindari pembuatan tampilan yang tidak diperlukan atau melakukan pencarian findViewById() yang mahal.

RecyclerView menyediakan semua pengelola layout bawaan ini:

Untuk membuat pengelola layout khusus, perluas kelas RecyclerView.LayoutManager.

Animasi

Animasi untuk menambahkan dan menghapus item diaktifkan secara default dalam RecyclerView. Untuk menyesuaikan animasi ini, perluas kelas RecyclerView.ItemAnimator dan gunakan metode RecyclerView.setItemAnimator().

Adapter

Adapter membantu dua antarmuka yang tidak kompatibel untuk bekerja bersama. Dalam RecyclerView, adapter menghubungkan data dengan tampilan. Adapter bertindak sebagai perantara antara data dan tampilan. Adapter menerima atau mengambil data, melakukan semua pekerjaan yang diperlukan agar bisa ditampilkan dalam suatu tampilan, dan menempatkan data dalam tampilan.

Misalnya, adapter bisa menerima data dari database sebagai objek Cursor, mengekstrak kata dan definisinya, mengonversinya menjadi string, dan menempatkan string dalam suatu tampilan item yang memiliki tampilan teks, satu untuk kata dan satu untuk definisi. Anda akan mengetahui selengkapnya tentang kursor dalam bab berikutnya.

RecyclerView.Adapter mengimplementasikan sebuah view holder, dan harus mengganti callback berikut:

  • onCreateViewHolder() memekarkan tampilan item dan mengembalikan view holder baru yang memuatnya. Metode ini dipanggil bila RecyclerView memerlukan view holder baru untuk menyatakan suatu item.
  • onBindViewHolder() menyetel materi item pada posisi yang ditentukan dalam RecyclerView. Proses ini dipanggil oleh RecyclerView, misalnya, bila sebuah item baru bergulir ke tampilan.

View holder

RecyclerView.ViewHolder menjelaskan tampilan data dan metadata tentnag tempatnya dalam RecyclerView. Setiap view holder menampung satu rangkaian data. Adapter menambahkan data ke view holder untuk ditampilkan oleh pengelola layout.

Definisikan layout view holder Anda dalam file sumber daya XML. Layout ini bisa berisi (hampir) semua tipe tampilan, termasuk elemen yang bisa diklik.

Mengimplementasikan RecyclerView

Mengimplementasikan RecyclerView memerlukan langkah-langkah berikut:

  1. Tambahkan dependensi RecyclerView ke file app/build.gradle aplikasi.
  2. Tambahkan RecyclerView ke layout aktivitas
  3. Buat file XML layout untuk satu item
  4. Perluas RecyclerView.Adapter dan implementasikan metode onCrateViewHolder serta onBindViewHolder.
  5. Perluas RecyclerView.ViewHolder untuk membuat view holder bagi layout item Anda. Anda bisa menambahkan perilaku klik dengan mengganti metode onClick.
  6. Dalam aktivitas Anda, dalam metode onCreate method, buat RecyclerView dan inisialisasi dengan adapter serta pengelola layout.

1. Tambahkan dependensi ke app/build.gradle

Tambahkan pustaka RecyclerView ke file app/build.gradle Anda sebagai dependensi. Lihat bab mengenai pustaka dukungan atau praktik RecyclerView, jika Anda memerlukan petunjuk detail.

dependencies {
    ...
    compile 'com.android.support:recyclerview-v7:24.1.1'
    ...
}

2. Tambahkan RecyclerView ke layout aktivitas Anda

Tambahkan RecyclerView dalam file layout aktivitas Anda.

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerview"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v7.widget.RecyclerView>

Gunakan RecyclerView dari pustaka dukungan agar kompatibel dengan perangkat lama. Satu-satunya atribut yang diperlukan adalah id, beserta lebar dan tinggi. Sesuaikan item tersebut, bukan grup tampilan ini.

3. Buat layout untuk satu item

Buat file sumber daya XML dan tetapkan layout satu item. File ini akan digunakan oleh adapter untuk membuat view holder.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="6dp">

    <TextView
        android:id="@+id/word"
        style="@style/word_title" />

</LinearLayout>

Tampilan teks memiliki elemen @style . Gaya adalah kumpulan properti yang menetapkan sosok suatu tampilan. Anda bisa menggunakan gaya untuk berbagi atribut tampilan dengan beberapa tampilan. Sebuah cara mudah untuk membuat gaya adalah dengan mengekstrak gaya elemen UI yang sudah Anda buat. Misalnya, setelah menata gaya TextView, Right-click > Refactor > Extract > Style pada elemen tersebut dan ikuti konfirmasi dialog. Lebih detail mengenai gaya ada dalam praktik dan dalam bab berikutnya.

4. Buat adapter dengan view holder

Perluas RecyclerView.Adapter dan implementasikan metode onCrateViewHolder serta onBindViewHolder.

Buat kelas Java baru dengan tanda tangan berikut:

public class WordListAdapter extends RecyclerView.Adapter<WordListAdapter.WordViewHolder> {}

Dalam konstruktor, dapatkan inflater dari konteks saat ini, dan data Anda.

    public WordListAdapter(Context context, LinkedList<String> wordList) {
        mInflater = LayoutInflater.from(context);
        this.mWordList = wordList;
    }

Untuk adapter ini, Anda harus mengimplementasikan 3 metode.

  • onCreateViewHolder() membuat suatu tampilan dan mengembalikannya.
    @Override
public WordViewHolder onCreateViewHolder(ViewGroup parent, int viewType){
    // Inflate an item view.
    View mItemView = mInflater.inflate(R.layout.wordlist_item, parent, false);
    return new WordViewHolder(mItemView, this);
}
  • onBindViewHolder() menghubungkan data dengan view holder pada posisi yang ditentukan dalam RecyclerView.
    @Override
public void onBindViewHolder(WordViewHolder holder, int position) {
    // Retrieve the data for that position
    String mCurrent = mWordList.get(position);
    // Add the data to the view
    holder.wordItemView.setText(mCurrent);
}
  • getItemCount() kembali ke jumlah item data yang tersedia untuk ditampilkan.
     @Override
public int getItemCount() {
    return mWordList.size();
}

5. Implementasikan kelas view holder

Perluas RecyclerView.ViewHolder untuk membuat view holder bagi layout item Anda. Anda bisa menambahkan perilaku klik dengan mengganti metode onClick.

Kelas ini biasanya didefinisikan sebagai kelas dalam untuk adapter dan memperluas RecyclerView.ViewHolder.

class WordViewHolder extends RecyclerView.ViewHolder {}

Jika Anda ingin menambahkan penanganan klik, Anda perlu mengimplementasikan listener klik. Salah satu cara untuk melakukannya adalah dengan memiliki view holder yang mengimplementasikan metode listener klik.

// Extend the signature of WordVewHolder to implement a click listener.
class WordViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {}

Dalam konstruktornya, view holder harus memekarkan layoutnya, menghubungkannya dengan adapter, dan jika berlaku, menyetel listener klik.

public WordViewHolder(View itemView, WordListAdapter adapter) {
    super(itemView);
    wordItemView = (TextView) itemView.findViewById(R.id.word);
    this.mAdapter = adapter;
    itemView.setOnClickListener(this);
}

Dan, jika Anda mengimplementasikan onClickListener, Anda juga harus mengimplementasikan onClick().

@Override
public void onClick(View v) {
    wordItemView.setText ("Clicked! "+ wordItemView.getText());
}

Perhatikan, untuk memasang listener klik ke elemen view holder lain, Anda harus melakukannya secara dinamis dalam onBindViewHolder. (Anda akan melakukan ini pada praktik nanti, saat Anda akan memperluas kode RecyclerView dari praktik.)

6. Buat RecyclerView

Terakhir, untuk mengikat semuanya, dalam metode onCreate() aktivitas Anda:

  1. Dapatkan penanganan untuk RecyclerView.
    mRecyclerView = (RecyclerView) findViewById(R.id.recyclerview);
  2. Buat adapter dan berikan data untuk ditampilkan.
    mAdapter = new WordListAdapter(this, mWordList);
  3. Hubungkan adapter dengan RecyclerView.
    mRecyclerView.setAdapter(mAdapter);
  4. Buat RecyclerView dengan pengelola layout default.
    mRecyclerView.setLayoutManager(new LinearLayoutManager(this));

RecyclerView adalah cara efisien untuk menampilkan data daftar gulir. RecyclerView menggunakan pola adapter untuk menghubungkan data dengan tampilan item daftar. Untuk mengimplementasikan RecyclerView, Anda perlu membuat adapter dan view holder, dan metode yang mengambil data serta menambahkannya ke item daftar.

Praktik terkait

Latihan terkait dan dokumentasi praktik ada di Dasar-Dasar Developer Android: Praktik.

Ketahui selengkapnya

results matching ""

    No results matching ""